<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- Axiso是一个基于promise的HTTP的库，可以用于浏览器和node.js中 -->
    <h1>axios基础使用</h1>
    <button id="btn">发送请求</button>
    <button id="btnGet">发送查询Get请求</button>
    <button id="btnPost">发送新增Post请求</button>
    <button id="btnUpdate">发送更新Undate请求</button>
    <button id="btnDelete">发送删除Delete请求</button>
    
    <script>
        const oBtnGet =document.getElementById('btnGet');   
        const oBtnPost =document.getElementById('btnPost');
        const oBtnUpdate =document.getElementById('btnUpdate');
        const oBtnDelete =document.getElementById('btnDelete');


        //给查询按钮绑定点击事件
        oBtnGet.onclink = async function () {   
            axios.get("user",{
                params: {
                    userId: "001"
                }
            })
            console.log(re.data);   //打印这个成功或者失败的值
        }

        //给新增按钮绑定事件
        oBtnPost.onclink = async function () {
            const re = await axios.post("/adduser", {
                name: "laowang",
                age: 18,
                sex: "男"
            })
            console.log(re.date);   打印这个成功或者失败的值
        }

        //给更新按钮绑定事件
        oBtnUpdate.onclick = async function () {
            const re = await axios.put("/updateuser", {
                user: "001",
                age: 18,
                sex: "女"
            })
            console.log(re.date);
        }
    
        oBtnDelete.onclick = async function () {
            const re = await axios.delete("/deleteuser", {
                params: {
                    userId:"001"
                }
            })
            console.log(re.date);
        }


        // const oBtn = document.getElementById('btn'); //
        //     try {
        //         oBtn.onclink = async function () {
        //             const re = await axios ({   //axios常用配置    re时promise实例的值resolve或者reject
        //                 url: "/user",   //地址位置
        //                 method: "get",  //请求方式为get
        //                 headers: {},    
        //                 params: {       //请求体 参数，只适用于post和put
        //                 userId: "001"
        //                 },    
        //                 date: {},       //数据
        //                 timeout: "10000",    //超时
        //             })
        //         }
        //     } catch (e) {
        //         console.log(e.emessage);
        //     }
            
            



            
            // axios成功的值的对象属性解析
            //     config 时axios请求的时候传入的配置对象
            //     date 后端响应的数据
            //     headers 响应头
            //     request 底层正真使用的xhr实例对象
            //     status 响应状态码
            //     statusText 响应状态描述 
            
    </script>
</body>
</html>